<template>
    <div class="w960 mgt30 changeArea">
      <area-select type='all' :level='2' v-model="select" @change="changeArea" :data="pcaa"></area-select>
    </div>
</template>

<script>
import Vue from 'vue';
import { pca, pcaa } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css';
import VueAreaLinkage from 'vue-area-linkage';
Vue.use(VueAreaLinkage)

  export default {
    props: ['area'],
    components: {

    },
    data() {
      return {
        select: [],
        pcaa: pcaa,
        status: false
      }
    },
    created() {

    },
    watch: {
      select(){
        if(this.status){
          this.select = ['请选择', '请选择', '请选择']
        }
      },
      area(val) {
        const myAreaNames = [];
        for (var key in val) {
          for (var index in val[key]) {
            myAreaNames.push(val[key][index])
          }
        }

        this.select = myAreaNames
      }
    },
    methods: {
      changeArea(val) {
        this.$emit('changeArea', val);
      },
      resetCity() {
        this.status = true;
      }
    }
  }
</script>

<style lang="scss">
.changeArea{
  .area-select.medium{
    width: 130px;
    line-height: 20px;
    padding: 0;
  }
  .area-select{
    height: 38px;
  }
}

</style>
